<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>地址列表</title>
		<script src="js/vue.global.js"></script>
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			ul,li {
				list-style: none;
			}
			.addr {
				height: 135px;
				border: 2px solid #CCCCCC;
				padding: 15px;
			}
			.addr:hover,.addr.active{
				border-color: #f90;
				cursor: pointer;
			}
			.addr-opration {
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			}
			.edit-btn, .del-btn {
			    margin-left: 10px; 
			}
			.addr h4 {
				font-size: 16px;
				margin-bottom: 15px;
			}
			.addr-opration a {
				color: #f90; 
			}
			.addr-opration a:nth-child(2) {
				color: #000; 
				text-decoration: none;
			}
			.check {
				border-color: #f90;
			}
			.addr-add-btn {
				color: #ccc;
				text-decoration: none;
				font-size: 40px;
			}
			.addr-add-btn:hover {
				color: #f90;
				text-decoration: none;
			}
			.addr-edit{
				float:right;
			}
			.addr-edit a{
				color: #000;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="container" id="app">
		    <ul class="row w-100 addr-list">
		        <li v-for="(address, idx) in pageAddress" class="col-lg-3 col-md-4 col-sm-6 mt-4" :key="address.id">
		            <div class="addr" @click="currentIndex=idx" :class="{active: currentIndex==idx}">
						<div class="addr-edit">
							<a href="javascript:;" class="edit-btn" v-if="address.isDefault" @click.prevent="editAddress(idx)">编辑</a>
						</div>
		                <h4 class="name">{{address.name}}</h4>
		                <div class="address">{{address.address}}</div>
		                <div class="phone">{{address.phone}}</div>
		                <div class="addr-opration">
							<div v-if="address.isDefault" class="addr-default d-inline">默认地址</div>
							<div v-else class="addr-set-default d-inline">
								<a href="javascript:;" class="addr-set-default-btn" @click.prevent="setDefault(idx)">设为默认</a>
							</div>
							<a href="javascript:;" class="del-btn" v-if="address.isDefault" @click.prevent="delAddress(address.id)">删除</a>
						</div>
		            </div>
		        </li>
		        <li class="col-3 mt-4">
		            <div class="addr d-flex justify-content-center align-items-center">
		                <a href="" class="addr-add-btn">+</a>
		            </div>
		        </li>
		    </ul>
		    <div class="row">
		        <div class="col">
		            <nav aria-label="Page navigation">
		                <ul class="pagination">
		                    <li class="page-item" :class="{disabled: currentPage == 1}">
		                        <a class="page-link" href="#" aria-label="Previous" @click.prevent="currentPage-=1">
		                            <span aria-hidden="true">&laquo;</span>
		                        </a>
		                    </li>
		                    <li class="page-item" v-for="i in totalPage" :class="{active: currentPage == i}" :key="i">
		                        <a class="page-link" href="#" @click.prevent="currentPage=i">{{i}}</a>
		                    </li>
		                    <li class="page-item" :class="{disabled: currentPage == totalPage}">
		                        <a class="page-link" href="#" aria-label="Next" @click.prevent="currentPage+=1">
		                            <span aria-hidden="true">&raquo;</span>
		                        </a>
		                    </li>
		                </ul>
		            </nav>
		        </div>
		    </div>
		</div>
		
		<script>
		    Vue.createApp({
		        data() {
		            return {
		                currentPage: 1,
		                currentIndex: 0,
		                addressList: [
		                    { id: 1, name: '丁一一', address: '浙江省温州市鹿城区大马路', phone: '13777778888', isDefault: 1 },
		                    { id: 2, name: '王二二', address: '浙江省宁波市鄞州区小马路', phone: '13555550000', isDefault: 0 },
		                    { id: 3, name: '马三三', address: '浙江省绍兴市越城区山阴路', phone: '13777778888', isDefault: 0 },
		                    { id: 4, name: '赵四四', address: '浙江省宁波市鄞州区小马路', phone: '13666667777', isDefault: 0 },
		                    { id: 5, name: '陈五五', address: '浙江省温州市鹿城区大马路', phone: '13999997777', isDefault: 0 }
		                ]
		            }
		        },
		        methods: {
		            setDefault(index) {
		                this.addressList.forEach(item => item.isDefault = 0);
		                this.addressList[index].isDefault = 1;
		            },
		            delAddress(id) {
		                const index = this.addressList.findIndex(item => item.id === id);
		                if (index !== -1) {
		                    this.addressList.splice(index, 1);
		                }
		            },
		            editAddress(index) {
		                const address = this.addressList[index];
		                const newName = prompt("编辑姓名:", address.name);
		                const newAddress = prompt("编辑地址:", address.address);
		                const newPhone = prompt("编辑电话:", address.phone);
		                if (newName) address.name = newName;
		                if (newAddress) address.address = newAddress;
		                if (newPhone) address.phone = newPhone;
		            }
		        },
		        computed: {
		            totalPage() {
		                let pageSize = 3;
		                return Math.ceil(this.addressList.length / pageSize);
		            },
		            pageAddress() {
		                const pageSize = 3;
		                const start = (this.currentPage - 1) * pageSize;
		                return this.addressList.slice(start, start + pageSize);
		            }
		        }
		    }).mount('#app');
		</script>
	</body>
</html>